import { Component, Fragment } from "react";
import { withRouter } from "react-router-dom";
import { Button, Switch, message, Modal } from "antd";
import { departDelete, departStatus } from "api/common.js";
import Qs from "qs";
import FromSearch from "components/formSearch";
import "./index.scss";
// 引入table组件
import TableComponent from "components/tableData";

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 请求数据
      isModalVisible: false,
      id: "",
      confirmLoading: false,
      switchFlag: false,
      tableConfig: {
        //表头数据
        thead: [
          { title: "部门名称", dataIndex: "name", key: "name" },
          {
            title: "禁启用",
            dataIndex: "status",
            key: "status",
            render: (value, item) => (
              <Switch
                checkedChildren="开启"
                unCheckedChildren="关闭"
                defaultChecked={value === "1" ? true : false}
                onChange={() => this.changeSwitch(item)}
              />
            )
          },
          { title: "人员数量", dataIndex: "number", key: "number" },
          {
            title: "操作",
            dataIndex: "operation",
            key: "operation",
            width: 215,
            render: (value, item) => (
              <div className="btn">
                <Button type="primary" onClick={() => this.edit(item)}>
                  编辑
                </Button>
                <Button onClick={() => this.delete(item)}>删除</Button>
              </div>
            )
          }
        ],
        border: false, //是否显示边框
        // isShowCheckbox:true, //显示多选框
        isShowBatch: true, //是否显示批量删除
        // 表数据--根据请求获取
        requestData: {
          //url 可以还传一个method
          url: "department/list/",
          method: "post",
          data: {
            pageNumber: 1,
            pageSize: 10,
            name: ""
          }
        },
        rowKey: "id"
      },
      formItem: [{ type: "Input", name: "name", label: "部门名称" }]
    };
  }
  // 方法
  // 拿到是否禁用的值
  changeSwitch = async val => {
    const { id, status } = val;
    const { switchFlag } = this.state; //用来防止多次点击 --- 不是防抖或者节流
    try {
      if (switchFlag) return;
      this.setState({ switchFlag: true });
      const res = await departStatus({ id, status });
      message.success(res.message);
      this.setState({ switchFlag: false });
    } catch (error) {
      this.setState({ switchFlag: false });
      message.warn(error);
    }
  };
  // 编辑
  edit = objVal => {
    this.props.history.push({
      pathname: "/index/department/add",
      search: Qs.stringify({ id: objVal.id })
    });
  };
  // 删除
  delete = val => {
    this.setState({ isModalVisible: true, id: val.id });
  };
  // 批量删除
  batch = id => {
    this.setState({ isModalVisible: true, id });
  };
  handleOk = async () => {
    const { id, tableConfig } = this.state;
    try {
      this.setState({ confirmLoading: true });
      const res = await departDelete({ id });
      message.success(res.message);
      const { pageNumber, pageSize, name } = tableConfig.requestData.data;
      this.refs["tableComponent"].initData({ pageNumber, pageSize, name });
      this.setState({ confirmLoading: false, isModalVisible: false });
    } catch (error) {
      this.setState({ confirmLoading: false, isModalVisible: false });
    }
  };
  init = () => {
    const { pageNumber, pageSize } = this.state.tableConfig.requestData.data;
    const requestData = { pageNumber, pageSize, name: "" };
    this.refs["tableComponent"].initData(requestData);
    this.refs.form.resetFields();
  };
  // 点击收索
  onFinish = val => {
    const { pageNumber, pageSize } = this.state.tableConfig.requestData.data;
    const requestData = { pageNumber, pageSize, name: val.name };
    this.refs["tableComponent"].initData(requestData);
  };
  render() {
    const { tableConfig, formItem } = this.state;
    return (
      <Fragment>
        {/* 这是封装后的组件 */}
        <FromSearch formItem={formItem} submit={this.onFinish}></FromSearch>
        <div style={{ height: "30px" }}></div>
        {/* 表格 */}

        <TableComponent
          tableConfig={tableConfig}
          ref="tableComponent"
          batch={this.batch}
        />
        {/* 模态框 */}
        <Modal
          title="提示"
          visible={this.state.isModalVisible}
          onOk={this.handleOk}
          onCancel={() => this.setState({ isModalVisible: false })}
          okText="确认"
          cancelText="取消"
          confirmLoading={this.state.confirmLoading}
        >
          <p>
            删除后不可恢复是否{" "}
            <span style={{ color: "red", fontSize: "20px" }}>删除？</span>
          </p>
        </Modal>
      </Fragment>
    );
  }
}

export default withRouter(Index);
